import 'package:earn_money/pages/register_page.dart';
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  
  var isPasswordVisible = false;

  @override
  Widget build(BuildContext context) {

    var title =  Container(
      color: Colors.transparent, // Set the color to transparent
      padding: const EdgeInsets.fromLTRB(16, 100, 16, 16), // Add top padding of 100
      child: const Text(
        'RichRush',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black, // Set the text color to black
          fontSize: 32,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
    
    var title2 =  Container(
      color: Colors.transparent, // Set the color to transparent
      padding: const EdgeInsets.all(8), // Add top padding of 100
      child: const Text(
        'Create an account & Start Earning',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black, // Set the text color to black
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    ); 
    
    var title3  =  Container(
      color: Colors.transparent, // Set the color to transparent
      padding: const EdgeInsets.all(5), // Add top padding of 100
      child: const Text(
        'You must be 18+ to use this app.',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black, // Set the text color to black
          fontSize: 15,
           fontWeight: FontWeight.bold,
        ),
      ),
    ); 

    // var rect = Expanded(child:)
    var emailRect = Container(
      padding: const EdgeInsets.all(20),
      child: const Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Email',
              prefixIcon: Icon(Icons.email),
              border: OutlineInputBorder(), // Add border to the TextField
            ),
          ),
        ],),
    );
     
    var passwordRect = Container(
      padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
      child:  Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Password',
              prefixIcon: const Icon(Icons.lock),
              suffixIcon: IconButton(
                icon: const Icon(Icons.visibility),
                onPressed: () {
                  setState(() {
                    isPasswordVisible = !isPasswordVisible;
                  });
                },
              ),
              border:const OutlineInputBorder(), // Add border to the TextField
            ),
            obscureText: isPasswordVisible,
          ),
        ],
      ),
    );
    
    var loginButton = Container(
      padding: const EdgeInsets.all(20),
      child: ElevatedButton(
        onPressed: () {
          // Add your login logic here
        },
        child: const Text('Login'),
      ),
    );
    
    var orDivider = Container(
      padding:  const EdgeInsets.fromLTRB(20,10,20,10),
      child: const Row(
        children: [
          Expanded(
            child: Divider(
              color: Colors.black,
              height: 1,
            ),
          ),
          Padding(
            padding:  EdgeInsets.symmetric(horizontal: 15),
            child: Text(
              'OR',
              style: TextStyle(
                color: Colors.black,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Divider(
              color: Colors.black,
              height: 1,
            ),
          ),
        ],
      ),
    );

    var googleSignInButton = Container(
      padding:  const EdgeInsets.fromLTRB(20,10,20,10),
      child: ElevatedButton.icon(
        onPressed: () {
          // Add your Google sign-in logic here
        },
        icon: const Icon(Icons.login),
        label: const Text('Sign in with Google Account'),
      ),
    );


var registerText = Container(
  padding: const EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text(
        "Don't have an account?",
        style: TextStyle(
          color: Colors.black,
          fontSize: 16,
        ),
      ),
      Container(
        margin: const EdgeInsets.only(left: 10),
        child: 
         GestureDetector(
          onTap: () {
            // Add your navigation logic here
             Navigator.push(
                      context, 
                      MaterialPageRoute(builder: (context) => const RegisterPage())
             );
          },
          child: const Text(
            "Register",
            style: TextStyle(
              color: Colors.green,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
        ), 
      ),
    ],
  ),
);

    return Scaffold(
      body:Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                title,
                title2,
                title3,
                emailRect,
                passwordRect,
                loginButton,
                orDivider,
                googleSignInButton,
                registerText
              ],
            ),
          ),
        ],
      )

    );
  }
}